<template>
  <div>
    <el-main
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.9)"
    >
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card shadow="hover" style="height: 150px;width: 600px" class="box-card">
          <div slot="header" class="clearfix">
            <span>当前时间：</span>
          </div>
          <div style="font-size: 50px"><span> {{ newTime }} </span></div>
        </el-card>
      </el-col>
      <el-col  :span="12">
        <el-card shadow="hover" style="height: 150px;width: 600px" class="box-card">
          <div slot="header" class="clearfix">房屋统计：</div>
          <el-row :gutter="24">
            <el-col :span="8">
              <div>
                <i class="el-icon-school" style="font-size: 25px;color: red"></i><i style="font-size: 25px">已售:{{this.soldOutCount}}</i>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <i class="el-icon-school" style="font-size: 25px;color: red"></i><i style="font-size: 25px">未售:{{this.unsoldCount}}</i>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <i class="el-icon-school" style="font-size: 25px;color: red"></i><i style="font-size: 25px">出租:{{this.rentOutCount}}</i>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-card shadow="hover">
          <div id="main" style="width: 400px;height:350px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div id="main1" style="width: 400px;height:350px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div id="main2" style="width: 400px;height:350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!--        <el-card shadow="hover" style="height: 400px;width: 250px;margin-top: 50px" class="box-card">-->
    <!--          <div slot="header" class="clearfix">-->
    <!--            <span><i class="el-icon-s-data"></i>小区统计：</span>-->
    <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
    <!--          </div>-->
    <!--          <div  class="text item">-->
    <!--            <i class="el-icon-office-building"></i>小区楼栋统计：{{}}<br><br>-->
    <!--            <i class="el-icon-office-building"></i>小区业主统计：{{owner}}<br><br>-->
    <!--            <i class="el-icon-office-building"></i>小区车辆统计：{{}}<br><br>-->
    <!--            <i class="el-icon-office-building"></i>小区车位统计：{{}}<br><br>-->
    <!--          </div>-->

    <!--        </el-card>-->
    </el-main>
  </div>
</template>


<script setup>
import * as echarts from 'echarts'
</script>
<script>
export default {
  data() {
    return {
      value: new Date(),
      newTime: "",
      owner: '',
      pieChart: null,
      pieChart2:null,
      pieChart3:null,

      complaintFinishedCount: '',
      complaintUnfinishedCount:'',

      rapairFinishedCount:null,
      rapairUnfinishedCount:null,

      loading:true,
      ownerCount:null,
      residentCount:null,
      buildingCount:null,
      carCount:null,
      staffCount:null,

      soldOutCount:null,
      unsoldCount:null,
      rentOutCount:null,

    }
  },
  created() {

  },
  mounted() {
    this.getNowTime();//进入页面调用该方法获取当前时间
    clearInterval(myTimeDisplay);//销毁之前定时器
    var myTimeDisplay = setInterval(() => {
      this.getNowTime(); //每秒更新一次时间
    }, 1000);
    this.ComplaintStatistics();
    this.RepairStatistics();
    this.InformationDetails();
    this.getUnsoldCount();
    this.getRentOutCount();
    this.getSoldOutCount();

  },
  methods: {
    getUnsoldCount(){
      this.$axios.get("manage/getUnsoldCount")
          .then(response=>{
            this.unsoldCount = response.data.data;

          })
    },
    getRentOutCount(){
      this.$axios.get("manage/getRentOutCount")
          .then(response=>{
            this.rentOutCount = response.data.data;
          })
    },
    getSoldOutCount(){
      this.$axios.get("manage/getSoldOutCount")
          .then(response=>{
            this.soldOutCount = response.data.data;

          })
    },

    async ComplaintStatistics(){
      this.$axios.get("manage/getComplaintFinishedCount")
          .then(response=>{
            this.complaintFinishedCount = response.data.data;
            this.$axios.get("manage/getComplaintUnFinishedCount")
                .then(response=>{
                  this.complaintUnfinishedCount = response.data.data;
                  console.log(this.complaintFinishedCount);
                  console.log(this.complaintUnfinishedCount);
                  this.initPieChart2();
                });
          });

    },
    RepairStatistics(){
      this.$axios.get("manage/getRapairFinishedCount")
          .then(response=>{
            this.rapairFinishedCount = response.data.data;
            this.$axios.get("manage/getRapairUnFinishedCount")
                .then(response=>{
                  this.rapairUnfinishedCount = response.data.data;
                  this.initPieChart();
                })
          });
    },
    async InformationDetails(){
      await Promise.all([
        this.$axios.get("manage/getOwnerCount")
            .then(response=>{
              this.ownerCount = response.data.data;
            }),
      this.$axios.get("manage/getResidentCount")
          .then(response=>{
            console.log(response);
            this.residentCount = response.data.data;
          }),
      this.$axios.get("manage/getBuildingCount")
          .then(response=>{
            this.buildingCount = response.data.data;
          }),
      this.$axios.get("manage/getCarCount")
          .then(response=>{
            this.carCount = response.data.data;
          }),
      this.$axios.get("manage/getStaffCount")
          .then(response=>{
            this.staffCount = response.data.data;
          }),
      ]);
      this.initPieChart3();
      this.loading=false;
    },

    getNowTime() {
      var date = new Date();
      var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
      this.newTime = time;
    },
    //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? ('0' + s) : s;
    },


    initPieChart2() {
      this.pieChart2 = echarts.init(document.getElementById('main1'));
      const option = {
        title: {
          text: '投诉统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        color:['rgba(53,239,0,0.72)','#d7d7d7'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: [
              {value: this.complaintFinishedCount, name: '已完成'},
              {value: this.complaintUnfinishedCount, name: '未完成'}
            ],
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.pieChart2.setOption(option);
    },
    initPieChart3() {
      this.pieChart3 = echarts.init(document.getElementById('main2'));
      const option = {
        title: {
          text: '小区信息统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            // 开启南丁格尔玫瑰图模式
            roseType: 'area',
            data: [
              {value: this.ownerCount, name: '业主'},
              {value: this.residentCount, name: '居民'},
              {value: this.buildingCount, name: '楼栋'},
              {value: this.carCount, name: '车辆'},
              {value: this.staffCount, name: '员工'},
              // {value: 118, name: '搜索引擎'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.pieChart3.setOption(option);
    },
    initPieChart() {
      this.pieChart = echarts.init(document.getElementById('main'));
      const option = {
        title: {
          text: '报修统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        color:['rgba(53,239,0,0.72)','#d7d7d7'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.rapairFinishedCount, name: '已完成'},
              {value: this.rapairUnfinishedCount, name:'未完成'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.pieChart.setOption(option);
    },

  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}


.custom-calendar /deep/ .el-calendar-table .el-calendar-day {
  height: 25px;
}


  .box-card {
  width: 480px;
  height: 500px;
  text-align: left;
}
</style>


